<template>
  <div class="big-box">
      <div class="top-box">
        <div class="top">
            <div>
                <span @click="fun()"><img src="/image/Mine/zjt.png" alt=""></span>
                <p>电子礼品卡购买/转赠</p> 
            </div>
        </div>  
      </div>
      <div class="refill">
          <div class="refill-box">
              <div class="content">
                  <h4>电子礼品卡</h4>
                  <p>全类通用，....</p>
                  <ul>
                      <li v-for="(v,i) in arr" :key="i" @click="pitch(i)" :class="{bgc:i==background}">￥{{v.price}}</li>
                  </ul>
              </div>
          </div>
      </div>
      <div class="help">
          <div class="help-box">
              <img src="/image/Mine/bc.png" alt="">
          </div>
      </div>
      <div class="bottom">
          <router-link :to="{name:'Okorder',params:{order:text}}">
              充值/转赠
          </router-link>
      </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            background:0,
            arr:[
                {id:0, price:"50"},
                {id:1,price:"88"},
                {id:2,price:"100"},
                {id:3,price:"200"},
                {id:4,price:"300"},
                {id:5,price:"500"},
                {id:6,price:"666"},
                {id:7,price:"800"},
                {id:8,price:"1000"}
            ],
            text:""
        }
    },
    methods:{
        pitch(i){
            // console.lohg(i)
            this.background=i
            this.text=i
        },
        fun(){
             this.$router.go(-1)
         }
    }
}
</script>

<style scoped>
.big-box{
    background-color: #f7f7f7;
}
.top-box{
    background-color: #fafafa;
    width: 100%;
    position: fixed;
    top: 0;
}
.top{
    width: 100%;
    display: flex;
    justify-content: center;
    height: 0.35rem;
}
.top div{
    width: 93%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.top div span,.top div span img{
    position: absolute;
    left: 2%;
    width: 0.2rem;
    height: 0.2rem;
}
.top div p{
    font-size: 0.16rem;
}
.refill{
    width: 100%;
    margin-top: 0.48rem;
    display: flex;
    justify-content: center;
}
.refill .refill-box{
    background: #ffffff;
    width: 93%;
    display: flex;
    justify-content: center;
    border-top: 0.15rem solid #fea918;
    border-radius: 0.08rem;
}
.refill .refill-box .content{
    width: 92%;
}
.refill .refill-box .content h4{
    margin-top: 0.15rem;
    font-size: 0.18rem;
    font-weight: normal;
}
.refill .refill-box .content p{
    margin-top: 0.1rem;
    padding-bottom: 0.115rem;
    font-size: 0.12rem;
    border-bottom: 0.01rem solid #e0e0e0;
}
.refill .refill-box .content ul{
    margin-top: 0.2rem;
    margin-bottom: 0.1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.refill .refill-box .content ul li{ 
    border: 0.01rem solid #dedede;
    margin-top: 0.1rem;
    border-radius: 0.08rem;
    height: 0.45rem;
    text-align: center;
    font-size: 0.18rem;
    line-height: 0.45rem;
    width: 31.5%;
}
.refill .refill-box .content ul .bgc{
    background-color: #08b0fb;
    color: #ebfeeb;
}
.help{
    margin-top: 0.2rem;
    width: 100%;
    display: flex;
    padding-bottom: 0.8rem;
    justify-content: center;
}
.help-box{
    width: 93%;
    border-radius: 0.08rem;
}
.help-box img{
    width: 100%;
}
.bottom{
    width: 100%;
    height: 0.7rem;
    position: fixed;
    bottom: 0;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bottom a{
    text-align: center;
    width: 94%;
    line-height: 0.4rem;
    font-size: 0.15rem;
    color: #ffffff;
    background-color: #06b0fe;
    height: 0.4rem;
    display: inline-block;
    border-radius: 0.8rem;
}

</style>